<template>
  <div class="box">
    <div class="box-header" :title="hintText">
      <span class="title pos-left">{{title}}</span>
      <ul class="tools pos-right">
        <li class="item">
          <button class="btn" type="button" @click="showSettingWindow">
            <i class="icon icon-setting"></i>
          </button>
        </li>
      </ul>
    </div>
    <div class="box-body">
      <div class="chart fullsize" id="chart-1"></div>
      <!-- <ul class="towerlist" v-cloak>
        <li class="item">
          <div class="title">高警情部位</div>
          <div class="subtitle fg-red">{{highDisasterDistrict}}</div>
        </li>
        <li class="item">
          <div class="title">环比上月增长</div>
          <div class="subtitle num fg-green">
            {{momIncrease}}
            <small>%</small>
          </div>
        </li>
        <li class="item">
          <div class="title">警情上升明显部位</div>
          <div class="subtitle fg-orange">{{highDisasterType}}</div>
        </li>
      </ul>-->
      <div class="chartSetting" v-show="showSetting">
        <div class="form">
          <div class="form-head">
            <div class="title">选择查询时间</div>
          </div>
          <div class="form-body">
            <div class="form-item">
              <div class="label">开始时间</div>
              <div class="field">
                <input
                  type="date"
                  class="datepicker"
                  v-model="startTime"
                  :max="timeLimit"
                  :min="timeMin"
                >
              </div>
            </div>
            <div class="form-item">
              <div class="label">结束时间</div>
              <div class="field">
                <input
                  type="date"
                  class="datepicker"
                  v-model="endTime"
                  :max="timeLimit"
                  :min="timeMin"
                >
              </div>
            </div>
          </div>
          <div class="form-foot">
            <button type="button" @click="saveSetting" class="btn bg-green">
              <span class="text">确定</span>
            </button>
            <button type="button" @click="cancelSetting" class="btn bg-green">
              <span class="text">关闭</span>
            </button>
          </div>
        </div>
      </div>
      <x-loading :show="showLoading"></x-loading>
      <dl-District ref="dialog" :show="showModal" :take="keyModal" :date="dateData"></dl-District>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import echarts from "echarts";
import Loading from "@/components/Loading";
import Pager from "@/components/Pager";
import dlDistrict from "@/view/onepic/dl_Section";

export default {
  data() {
    return {
      startTime: this.dateShift(0) + ' 00:00:00',
      endTime: this.dateShift(0)+' 23:59:59',
      dateData: {
        startTime: this.dateShift(0) + ' 00:00:00',
        endTime: this.dateShift(0)+' 23:59:59'
      },
      showSetting: false,
      showLoading: false,
      highDisasterDistrict: "",
      highDisasterType: "",
      momIncrease: 0,
      rangeMax: 300, //注意，后面要从接口取
      chartInstance: null,
      option: null,
      params: null,
      showModal: false,
      keyModal: null,
      chartData: null,
      autoflip: false,
      ticketfn: null,
      timeLimit: this.today(),
      timeMin: this.dateShift(-365*2)
    };
  },
  props: {
    title: String
  },
  components: {
    "x-loading": Loading,
    "x-pager": Pager,
    "dl-District": dlDistrict
  },
  computed: {
    hintText() {
      return `显示数据自${this.startTime}起，截止至${this.endTime}`;
    }
  },
  mounted() {
    this.renderChart();
  },
  methods: {
    showSettingWindow() {
      this.showSetting = true; //打开进度等待动画
    },
    cancelSetting() {
      this.showSetting = false; //关闭进度等待动画
    },
    saveSetting() {
      //加载数据
      this.renderChart();
      this.showSetting = false;
    },
    closeModal() {
      this.showModal = false;
    },
    renderChart() {
      this.params = {
        startTime: this.startTime,
        endTime: this.endTime
      };

      this.showLoading = true;

      axios
        .get(this.URLHEAD + "YZT_ZQXYFX", {
          params: this.params
        })
        .then(res => {
          let data = res.data.Data;

          data = data.sort();

          this.option = {
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow"
              }
            },
            legend: {
              data: ["火灾扑救", "抢险救援", "社会救助", "其他出动"],
              align: "right",
              right: 10,
              textStyle: {
                color: "#fff"
              },
              itemWidth: 10,
              itemHeight: 10,
              itemGap: 35
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true
            },
            xAxis: {
              type: "value",
              axisLine: {
                lineStyle: {
                  color: "#565d77"
                }
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: "rgba(255,255,255,0.4)"
                }
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: true,
                color: "#a4a7b5",
                fontSize: 12,
                interval: 0,
                formatter: "{value}起"
              }
            },
            yAxis: {
              type: "category",
              axisTick: {
                show: false
              },
              axisLine: {
                lineStyle: {
                  color: "#565d77"
                }
              },
              axisLabel: {
                color: "rgba(255,255,255,0.7)"
              },
              data: data.map(i => {
                if(i.AreaName=="贵阳市"){
                  i.AreaName="其他"
                }
                return i.AreaName;
              })
            },
            series: [
              {
                name: "火灾扑救",
                type: "bar",
                stack: "总量",
                barWidth: "52%",
                label: {
                  //fontSize: 5,
                  //padding: [10, 0, 0, 0],
                  normal: {
                    show: true,
                    position: "inside",
                    color: "#FFFFFF"
                  }
                },
                itemStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: this.COLORS[0]
                      },
                      {
                        offset: 1,
                        color: this.COLORS[1]
                      }
                    ]),
                    opacity: 1
                  }
                },
                data: data.map(i => {
                  return i.List.hzjy_list;
                })
              },
              {
                name: "抢险救援",
                type: "bar",
                stack: "总量",
                barWidth: "52%",
                label: {
                  //fontSize: 5,
                  //padding: [10, 0, 0, 0],
                  normal: {
                    show: true,
                    position: "inside",
                    color: "#FFFFFF"
                  }
                },
                itemStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: this.COLORS[2]
                      },
                      {
                        offset: 1,
                        color: this.COLORS[3]
                      }
                    ]),
                    opacity: 1
                  }
                },
                data: data.map(i => {
                  return i.List.qxpj_list;
                })
              },
              {
                name: "社会救助",
                type: "bar",
                stack: "总量",
                barWidth: "52%",
                label: {
                  //fontSize: 5,
                  //padding: [10, 0, 0, 0],
                  normal: {
                    show: true,
                    position: "inside",
                    color: "#FFFFFF"
                  }
                },
                itemStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: this.COLORS[4]
                      },
                      {
                        offset: 1,
                        color: this.COLORS[5]
                      }
                    ]),
                    opacity: 1
                  }
                },
                data: data.map(i => {
                  return i.List.shjz_list;
                })
              },
              {
                name: "其他出动",
                type: "bar",
                stack: "总量",
                barWidth: "52%",
                label: {
                  normal: {
                    show: true,
                    position: "inside",
                    color: "#FFFFFF"
                  }
                },
                itemStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: this.COLORS[7]
                      },
                      {
                        offset: 1,
                        color: this.COLORS[9]
                      }
                    ]),
                    opacity: 1
                  }
                },
                data: data.map(i => {
                  
                    return i.List.qtcd_list;
                  
                })
              }
            ]
          };

          this.chartInstance = this.$Crender("chart-1", this.option);

          let vm = this;

          this.chartInstance.on("click", e => {
            let districtName = e.name;
            if (districtName !== "") {
              if(districtName=="其他"){
                districtName="贵阳市"
              }
              vm.keyModal = districtName;
              vm.date = {
                startTime: this.startTime + " 00:00:00",
                endTime: this.endTime + " 23:59:59"
              };
              vm.$refs.dialog.query(districtName);
            }
          });

          this.showLoading = false;
        });
    }
  }
};
</script>
<style scoped>
</style>